<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="'200px'" style="margin-right: 12px;background-color: #fff;">
      <div style="background-color: #FFFFFF;width: 100%">
        <div class="tactics_r">
          <div @click="btnTactics(1)" style="cursor:pointer;" :class="{cur:index === 1}">自定义消息</div>
          <div @click="btnTactics(2)" style="cursor:pointer;" :class="{cur:index === 2}">消息模板</div>
        </div>
      </div>
    </a-col>
    <a-col flex="auto">
      <custom v-if="index === 1"></custom>
      <SysMessageTemplateList v-if="index === 2"></SysMessageTemplateList>
    </a-col>
  </a-row>
</template>

<script>
  import custom from "@views/modules/message/custom";
  import SysMessageTemplateList from "@views/modules/message/SysMessageTemplateList";
  export default {
    name: "SysMessageList",
    components:{ custom,SysMessageTemplateList },
    data() {
      return {
        index:1,
      }
    },
    methods: {
      btnTactics(val){
        this.index = val
      },
    }
  }
</script>
<style lang="less" scoped>
  .tactics_r{
    padding: 20px 0 0 0;
    background-color: #FFFFFF;
  }
  .tactics_r>div{
    display: flex;
    padding: 10px 0 10px 45px;
    font-size: 16px;
  }
  .cur{
    background-color: #E6F7FF;
  }

</style>